const n = `<!--
 * @Author: Quarter
 * @Date: 2024-07-18 19:34:17
 * @LastEditors: Quarter
 * @LastEditTime: 2024-12-13 11:43:53
 * @FilePath: /simple-ui/packages/documents/src/views/desktop/table/default-table.vue
 * @Description: 默认示例
-->
<template>
  <div>
    <s-form label-width="8em" colon="：">
      <s-form-item label="是否显示分页">
        <s-switch v-model="options.pagination"></s-switch>
      </s-form-item>
      <s-form-item label="是否显示边框">
        <s-switch v-model="options.bordered"></s-switch>
      </s-form-item>
      <s-form-item label="是否显示条纹">
        <s-switch v-model="options.stripe"></s-switch>
      </s-form-item>
      <s-form-item label="是否粘滞表头">
        <s-switch v-model="options.sticky"></s-switch>
      </s-form-item>
      <s-form-item label="是否可多选">
        <s-switch v-model="options.batch"></s-switch>
      </s-form-item>
      <s-form-item label="表格排列方向">
        <s-radio-group v-model="options.align" :options="alignList"></s-radio-group>
      </s-form-item>
    </s-form>
    <s-table
      v-model="options.ids"
      :table-row-key="options.tableRowKey"
      :table-config="tableConfigMerged"
      :table-data="tableData"
      :pagination="options.pagination"
      :pagination-config="options.paginationConfig"
      :bordered="options.bordered"
      :stripe="options.stripe"
      :sticky="options.sticky"
      :style="{ height: '40em', marginTop: '2em' }"
      @change="handlePaginationChange"
    >
      <template #status="{ cell }">
        <s-tag v-if="cell === 0" theme="success" variant="light">审批通过</s-tag>
        <s-tag v-else-if="cell === 1" theme="danger" variant="light">审批失败</s-tag>
        <s-tag v-else theme="warning" variant="light">审批过期</s-tag>
      </template>
    </s-table>
  </div>
</template>

<script lang="ts">
import {
  TABLE_ALIGN_DEFAULT,
  TABLE_ALIGN_LABEL,
  TABLE_ALIGN_OPTIONS,
  type TableColumnConfigs,
} from "@smartcity/simple-ui";
import { Component, Vue } from "vue-property-decorator";

interface DemoData {
  index: number;
  applicant: string;
  status: number;
  channel: string;
  detail: { email: string };
  matters: string;
  time: number;
  createTime: string;
}

const initialData: DemoData[] = [];
const total = 28;
for (let i = 0; i < total; i++) {
  initialData.push({
    index: i + 1,
    applicant: ["贾明", "张三", "王芳"][i % 3],
    status: i % 3,
    channel: ["电子签署", "纸质签署", "纸质签署"][i % 3],
    detail: {
      email: ["w.cezkdudy@lhll.au", "r.nmgw@peurezgn.sl", "p.cumx@rampblpa.ru"][i % 3],
    },
    matters: ["宣传物料制作费用", "algolia 服务报销", "相关周边制作费", "激励奖品快递费"][i % 4],
    time: [2, 3, 1, 4][i % 4],
    createTime: ["2022-01-01", "2022-02-01", "2022-03-01", "2022-04-01", "2022-05-01"][i % 4],
  });
}

@Component
export default class DefaultTable extends Vue {
  /**
   * @description: 排列方向可选项列表
   * @private
   * @readonly
   * @type {Array<Object>}
   */
  readonly alignList = TABLE_ALIGN_OPTIONS.map((align) => ({
    value: align,
    label: TABLE_ALIGN_LABEL.get(align),
  }));

  /**
   * @description: 表格配置
   * @private
   * @readonly
   * @type {TableColumnConfigs<DemoData>}
   */
  readonly tableConfig: TableColumnConfigs<DemoData> = [
    { name: "index" },
    { name: "applicant", title: "申请人", width: "20em" },
    { name: "status", title: "申请状态" },
    { name: "channel", title: "签署方式" },
    { name: "detail.email", title: "邮箱地址" },
    { name: "createTime", title: "申请时间" },
  ];

  /**
   * @description: 组件配置项
   * @private
   * @type {Object}
   */
  options = {
    tableRowKey: "index", // 行索引
    align: TABLE_ALIGN_DEFAULT, // 排列方向
    bordered: false, // 是否显示边框线
    stripe: false, // 是否显示斑马纹
    sticky: false, // 表头是否粘滞
    batch: false, // 是否可多选
    pagination: false, // 是否显示分页
    ids: [], // 多选记录
    paginationConfig: {
      pageSize: 10,
      pageNo: 1,
      total: initialData.length,
      counter: true,
      resizer: true,
      jumper: true,
    },
  };

  /**
   * @description: 合并的表格配置
   * @private
   * @readonly
   * @type {TableColumnConfigs<DemoData>}
   */
  get tableConfigMerged(): TableColumnConfigs<DemoData> {
    if (this.options.batch) {
      return [
        { name: "checkbox" },
        ...this.tableConfig.map((config) => ({ ...config, align: this.options.align })),
      ];
    }

    return this.tableConfig.map((config) => ({ ...config, align: this.options.align }));
  }

  /**
   * @description: 表格数据
   * @private
   * @readonly
   * @type {Array<Object>}
   */
  get tableData(): typeof initialData {
    if (this.options.pagination) {
      const { pageNo, pageSize } = this.options.paginationConfig;
      return initialData.slice(
        (pageNo - 1) * pageSize,
        Math.min(pageNo * pageSize, initialData.length),
      );
    }
    return initialData;
  }

  /**
   * @description: 处理分页变化
   * @private
   * @param {number} pageNo 分页页码
   * @param {number} pageSize 分页大小
   * @returns
   */
  handlePaginationChange(pageNo: number, pageSize: number): void {
    this.options.paginationConfig.pageNo = pageNo;
    this.options.paginationConfig.pageSize = pageSize;
  }
}
<\/script>
`; export { n as default };
